<template>
	<!-- 折叠盒子----惩罚记录列表折叠 -->
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-container">
			<view class="input-container">
				<image class="search-icon" src="@/static/images/search.svg"></image>
				<input type="text" placeholder="搜索护工名、事项" v-model="searchQuery" @confirm="searchPersonnel"
					class="search-input" />
				<button @click="searchPersonnel()" class="search-button">搜索</button>
			</view>
		</view>
		<!-- 不同时间选择 -->
		<view class="tabTop box1">
			<view class="tabTopItem" v-for="(item,index) in tabTopList" :key="index"
				:class="{'ac':tabTopCurrent == item.index}" @click="clickTabTop(item.index)">{{item.name}}
			</view>
		</view>

		<!-- 数据展示 -->
		<view class="box2" style="margin-top: 210rpx;">
			<view class="box2_data" v-for="(record, index) in penaltyRecords" :key="index">
				<!-- 是否被处罚的图片 是已撤销还是已处罚-->
				<view class="punish_status_box" v-if="select[index]">
					<image src="@/static/images/punish/1.svg" class="punish_status_image" v-if="record.revoke == 0">
					</image>
					<image src="@/static/images/punish/2.svg" class="punish_status_image" v-if="record.revoke == 1">
					</image>
				</view>

				<view class="box2_data_box1">
					<view class="box2_data_box1_t1">被罚事项: {{ record.title }}</view>
				</view>
				<view class="box2_data_box2">
					<view class="box2_data_box2_t1">被罚护工：{{ record.username }}</view>
					<view class="box2_data_box2_t2">{{ record.status }}</view>
				</view>

				<view class="box2_data_item1" v-if="select[index]">处罚说明</view>

				<view class="box2_data_item3">
					<view class="box2_data_item3_left">违规时间：{{record.violations_time}}</view>
					<view class="packup" @click="toggleCollapse(index)" v-if="!select[index]">
						<image src="@/static/images/punish/check.svg" class="packup_img"></image>
						<view
							style="margin-left: 6rpx;font-size: 22rpx;font-weight: 400;letter-spacing: 0rpx;color: rgba(0, 186, 173, 1);">
							查看</view>
					</view>
				</view>

				<!-- 需要被隐藏的部分 -->
				<transition name="expand">
					<view v-if="select[index]">
						<view class="box2_data_item2">处罚原因：{{record.comment}}</view>
						<view class="box2_data_item1">处罚信息</view>
						<view v-for="(penalty, pIndex) in record.punishmentChild" :key="pIndex">
							<view v-if="penalty.title == '罚款'">
								<view class="box2_data_item2">处罚类型：{{ penalty.title }}</view>
								<view class="box2_data_item2">处罚金额：<span
										style="font-weight: 500;color: rgba(250, 81, 81, 1);">{{ penalty.refund_money }}元</span>
								</view>
							</view>

							<view v-if="penalty.title == '禁止接单'">
								<view class="box2_data_item2">处罚类型：{{ penalty.title }}</view>
								<view class="box2_data_item2">处罚时长：<span
										style="font-weight: 500;color: rgba(250, 81, 81, 1);">{{ calculatePenaltyDuration(penalty.begin_time, penalty.end_time) }}</span>
								</view>
								<view class="box2_data_item2">处罚周期：{{ penalty.begin_time }} ~
									{{ penalty.end_time }}
								</view>
							</view>
							<view v-if="penalty.title == '减少推荐'">
								<view class="box2_data_item2">处罚类型：{{ penalty.title }}</view>
								<view class="box2_data_item2">处罚时长：<span
										style="font-weight: 500;color: rgba(250, 81, 81, 1);">{{ calculatePenaltyDuration(penalty.begin_time, penalty.end_time) }}</span>
								</view>
								<view class="box2_data_item2">处罚周期：{{ penalty.begin_time }} ~
									{{ penalty.end_time }}
								</view>
							</view>
							<view v-if="penalty.title == '分佣减少1%'">
								<view class="box2_data_item2">处罚类型：{{ penalty.title }}</view>
								<view class="box2_data_item2">处罚时长：<span
										style="font-weight: 500;color: rgba(250, 81, 81, 1);">{{ calculatePenaltyDuration(penalty.begin_time, penalty.end_time) }}</span>
								</view>
								<view class="box2_data_item2">处罚周期：{{ penalty.begin_time }} ~
									{{ penalty.end_time }}
								</view>
							</view>
							<view class="divider-header"></view>
						</view>

						<!-- 底部按钮 -->
						<view class="status">
							<view class="delete" @click.stop="deleteConfirmHandle(record.id)">
								<image src="@/static/images/punish/delete.svg" class="delete_img"></image>
								<view class="delete-word">删除记录</view>
							</view>

							<view class="cancel" @click.stop="cancelConfirmHandle(record.id)">
								<image src="@/static/images/punish/cancel.svg" class="cancel_img"></image>
								<view class="cancel-word">撤销处罚</view>
							</view>

							<view class="packup" @click.stop="toggleCollapse(index)">
								<image src="@/static/images/punish/packup.svg" class="packup_img"></image>
								<view class="putAway">收起 </view>
							</view>
						</view>

					</view>
				</transition>
				<!--  -->


			</view>
		</view>

		<!-- 暂无数据 -->
		<view v-if="penaltyRecords.length==0" style="text-align: center;">
			<image src="@/static/images/nodata.png" style="width: 128rpx;height: 134rpx;margin-top: 400rpx;">
			</image>
			<view style="margin-top: 20rpx;font-size: 24rpx;color: rgba(166, 166, 166, 1);">暂无数据</view>
		</view>

		<!-- 其他 -->
		<view style="height: 220rpx;width: 1rpx;"></view>
		<!-- 底部按钮 -->
		<view class="footer">
			<view @click="addPenalty()" class="add-btn">
				<view class="footer_t1">+</view>
				<view class="footer_t2">新增记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select: [], //折叠数组
				requestStatus: false, // 事件防抖
				currentPage: 1, //当前页面
				tabTopList: [{
						index: 1,
						name: "最近三天"
					},
					{
						index: 2,
						name: "最近七天"
					},
					{
						index: 3,
						name: "最近一月"
					},
					{
						index: 4,
						name: "自定义"
					},
				],
				tabTopCurrent: 1, //默认选择最近三天
				showModal: false, //自定义的弹层
				// 测试数据
				penaltyRecords: [{
						comment: "测试数据001",
						create_by: "16012",
						create_time: "2024-05-30 17:08:09",
						id: "6",
						punish_matters_id: "1",
						punish_user_id: "16014",
						punishmentChild: [{
							begin_time: "0000-00-00",
							end_time: "0000-00-00",
							id: "11",
							lc_punishment_id: "6",
							punish_type_id: "1",
							refund_money: "100.00",
							title: "罚款"
						}, {
							begin_time: "2024-05-30",
							end_time: "2024-06-30",
							id: "12",
							lc_punishment_id: "6",
							punish_type_id: "2",
							refund_money: "0.00",
							title: "禁止接单"
						}, {
							begin_time: "2024-05-30",
							end_time: "2024-06-30",
							id: "13",
							lc_punishment_id: "6",
							punish_type_id: "3",
							refund_money: "0.00",
							title: "减少推荐"
						}, {
							begin_time: "2024-05-30",
							end_time: "2024-06-30",
							id: "14",
							lc_punishment_id: "6",
							punish_type_id: "4",
							refund_money: "0.00",
							title: "分佣减少1%"
						}],
						revoke: "1",
						title: "迟到",
						update_by: "16012",
						update_time: "2024-05-30 17:26:08",
						username: "陈天亮",
						violations_time: "2024-03-31"
					},
					{
						comment: "测试数据001",
						create_by: "16012",
						create_time: "2024-05-30 17:08:09",
						id: "6",
						punish_matters_id: "1",
						punish_user_id: "16014",
						punishmentChild: [{
							begin_time: "0000-00-00",
							end_time: "0000-00-00",
							id: "11",
							lc_punishment_id: "6",
							punish_type_id: "1",
							refund_money: "100.00",
							title: "罚款"
						}, {
							begin_time: "2024-05-30",
							end_time: "2024-06-30",
							id: "12",
							lc_punishment_id: "6",
							punish_type_id: "2",
							refund_money: "0.00",
							title: "禁止接单"
						}, {
							begin_time: "2024-05-30",
							end_time: "2024-06-30",
							id: "13",
							lc_punishment_id: "6",
							punish_type_id: "3",
							refund_money: "0.00",
							title: "减少推荐"
						}, {
							begin_time: "2024-05-30",
							end_time: "2024-06-30",
							id: "14",
							lc_punishment_id: "6",
							punish_type_id: "4",
							refund_money: "0.00",
							title: "分佣减少1%"
						}],
						revoke: "1",
						title: "迟到",
						update_by: "16012",
						update_time: "2024-05-30 17:26:08",
						username: "陈天亮",
						violations_time: "2024-03-31"
					}
				],

			}
		},
		methods: {
			/**
			 * 搜索
			 */
			searchPersonnel() {
				console.log('搜索111');
			},
			/**
			 * 点击状态
			 */
			clickTabTop(index) {
				if (this.tabTopCurrent != index) {
					this.tabTopCurrent = index;
				}
				if (this.requestStatus) { // 时间防抖：利用 return 终止函数继续运行
					return false;
				};
				this.requestStatus = true;
				//防抖请求数据
					setTimeout(() => {
						console.log(index);
						//原来数据制空
						this.currentPage = 1;
						this.penaltyRecords = []
						if (index == '4') {
							//打开弹层
							this.showModal = !this.showModal;
						} else {
							//请求列表数据
						}
						this.requestStatus = false; // 模拟执行完毕，改变 requestStatus
					}, 800);
			},
			/**
			 * 折叠或者展开的方法
			 */
			toggleCollapse(index) {
				console.log("查看或者折叠", index)
				let array = this.select
				array[index] = !this.select[index]
				array.forEach((item, index1) => {
					if (index1 != index) {
						array[index1] = false
					}
				})
				this.select = array
				this.$forceUpdate()
			},
			/**
			 * 删除记录的方法
			 */
			deleteConfirmHandle() {

			},
			/**
			 * 撤销处罚的方法
			 */
			cancelConfirmHandle() {

			},
			/**
			 * 
			 */
			calculatePenaltyDuration(beginTime, endTime) {
				// 将开始时间和结束时间转换为 Date 对象
				const startDate = new Date(beginTime);
				const endDate = new Date(endTime);

				// 计算相差的时间，单位为毫秒
				const difference = endDate.getTime() - startDate.getTime();

				// 将毫秒转换为天数
				const days = Math.ceil(difference / (1000 * 3600 * 24)) + 1;

				// 返回处罚时长
				return days + '天';
			}

		}
	}
</script>

<style scoped>
	@import './foldView.css'
</style>